<template>
  <div class="hello">
    <el-form
      :inline="true"
      class="demo-form-inline"
    >
      <el-form-item label="地区">
        <div class="input-wrapper">
          <el-input
            class="input-enter"
            placeholder="请输入地区"
            v-model="city"
          ></el-input>
          <el-input class="input-view" v-model="testCity"></el-input>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onLoading"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <div
      class="weather-info"
      v-if="weatherInfo.city"
    >
      <h4>{{ weatherInfo.city }} - <i class="iconfont icon-Termometer1"></i>{{ weatherInfo.wendu }} ℃ {{ weatherInfo.forecast[1].fengxiang }} <i class="iconfont icon-Wind"></i> {{ weatherInfo.forecast[1].fengli.match(/\d(级)/)[0] }}</h4>
      <p>{{ weatherInfo.ganmao }}</p>
      <div
        ref="weather_echart"
        class="weather_echart"
      ></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { debounce, loading } from '@/utils/Tools'

@Component
export default class HelloWorld extends Vue {
  public title: string = 'hello world! title'
  private city: string = ''
  private name: string = 'HelloWorld'
  private weatherEchart: any
  private weatherInfo: any = {}
  private futureWeather: any
  get testCity() {
    return '$' + this.city
  }
  @loading('加载中...')
  private async onLoading() {
    if (!this.city.replace(/\s/g, '')) {
      return this.$message({
        type: 'warning',
        message: '请输入地区',
      })
    }
    const r = await this.loadData()
    if (r.status === 1000) {
      this.weatherInfo = r.data
      this.loadWeatherData()
    } else {
      this.$message({
        type: 'error',
        message: '请输入正确的城市',
      })
    }
  }
  private loadWeatherData() {
    const future = this.weatherInfo.forecast
    future.unshift(this.weatherInfo.yesterday)
    const tempFuture = future.map((e: any, i: number) => ({
      date: e.date.match(/\d{1,2}(日)/)[0],
      week: i === 0 ? '昨天' : i === 1 ? '今天' : e.date.match(/(星期).*/)[0],
      wind: e.fengxiang || e.fx,
      high: e.high.split(' ').slice(-1)[0].replace('℃', ''),
      low: e.low.split(' ').slice(-1)[0].replace('℃', ''),
      type: e.type,
    }))
    this.futureWeather = {
      date: tempFuture.map((e: any) => e.date),
      week: tempFuture.map((e: any) => e.date + '\n' + e.week + '\n' + e.type),
      high: tempFuture.map((e: any) => e.high),
      low: tempFuture.map((e: any) => e.low),
    }
    this.$nextTick(() => {
      this.loadWeatherChart()
    })
  }
  private loadData() {
    return this.$axios.get('http://localhost:8000/weather_mini?city=' + this.city.replace(/\s/g, ''))
  }
  private loadWeatherChart() {
    this.weatherEchart =
      this.weatherEchart || this.$echarts.init(this.$refs.weather_echart)
    const options = {
      xAxis: {
        type: 'category',
        position: 'top',
        data: this.futureWeather.week,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      grid: {
        left: '0',
        right: '0',
        bottom: '10%',
        containLabel: true,
      },
      yAxis: {
        show: false,
      },
      series: [
        {
          name: '最高气温',
          type: 'line',
          data: this.futureWeather.high,
          label: { show: true, formatter: '{c} °C ' },
        },
        {
          name: '最低气温',
          type: 'line',
          data: this.futureWeather.low,
          label: { show: true, formatter: '{c} °C' },
        },
      ],
    }
    this.weatherEchart.setOption(options, true)
    window.addEventListener('resize', this.onResize)
  }
  @debounce(500)
  private onResize() {
    this.weatherEchart.resize()
  }
  private brforeDestory() {
    window.removeEventListener('resize', this.onResize, false)
  }
}
</script>

<style scoped lang="scss">
$main-color: #42b983;
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: $main-color;
}
.search-weather {
  display: flex;
}
.weather-info {
  width: 100%;
  min-height: 30px;
  box-sizing: border-box;
  padding: 6px;
  box-shadow: inset 0px 0px 5px 0px $main-color;
  border-radius: 6px;
}
/deep/.el-step__title.is-finish,
/deep/.el-step__head.is-finish {
  color: $main-color;
}
/deep/.el-step__head.is-finish {
  border: $main-color;
}
.weather_echart {
  width: 100%;
  min-height: 300px;
}
/deep/.el-input__inner {
  text-align: center;
}
.input-wrapper {
  width: 120px;
  position: relative;
  .input-enter,
  .input-view {
    position: absolute;
    left: 0;
    top: 0;
  }
  .input-enter {
    background-color: transparent;
    z-index: 5;
  }
  .input-view {
    z-index: 2;
  }
}
</style>
